<el-form-item :label="item.name">
    <el-popover
        placement="bottom"
        :ref="'RightTagPopverRef'+item.flag"
        @before-enter="RightTagPopverShow(item)"
        @hide="handleDocumentOverlay(false);"
        width="auto"
        trigger="click">
        <div style="height: 400px" v-loading="RightTagPopver.loading">
            <el-tabs 
                v-model="RightTagPopver.leftactive"
                @tab-change="RightTagRightData(item)"
                class="right-tag-tabs" 
                tab-position="left" 
                style="height: 400px">
                <el-tab-pane label="{lang All_labels}" name="all">
                    <div style="height: 44px;">
                        <el-input
                            v-model.trim="RightTagPopver.keyword" 
                            prefix-icon="Search" 
                            placeholder="{lang search}"
                            @keydown.enter="RightTagPopverSearchEnter(item)"
                            @input="RightTagPopverSearch"
                            clearable></el-input>
                    </div>
                    <el-scrollbar height="356px">
                        <template v-if="RightTagPopver.keyword">
                            <el-check-tag
                                v-if="!RightTagPopver.right.searchCongruent"
                                @change="RightTagPopverSearchEnter(item)">
                                {lang creation}“{{RightTagPopver.keyword}}”{lang label}
                                </el-check-tag>
                            <el-check-tag
                                v-for="val in RightTagPopver.right.searchdata"
                                :checked="RightTagPopver.right.active.indexOf(val.tid)>-1"
                                @change="RightTagPopverChange(item,val)"
                                :key="val.tid">
                                {{ val.tagname }}
                                </el-check-tag>
                        </template>				
                        <template v-else>
                            <div v-if="RightTagPopver.right.recent.length" style="margin-bottom: var(--el-popover-padding);">
                                <p style="padding-bottom: var(--el-popover-padding);">{lang Common_tags}</p>
                                <el-check-tag 
                                    v-for="val in RightTagPopver.right.recent"
                                    :checked="RightTagPopver.right.active.indexOf(val.tid)>-1"
                                    @change="RightTagPopverChange(item,val)"
                                    :key="val.tid">
                                    {{ val.tagname }}
                                    </el-check-tag>
                            </div>
                            <template v-for="fitem in RightTagPopver.right.data">
                                <div style="margin-bottom: var(--el-popover-padding);">
                                    <p style="padding-bottom: var(--el-popover-padding);">{{fitem.text}}({{fitem.num}})</p>
                                    <el-check-tag 
                                        v-for="val in fitem.data"
                                        :checked="RightTagPopver.right.active.indexOf(val.tid)>-1"
                                        @change="RightTagPopverChange(item,val)"
                                        :key="val.tid">
                                        {{ val.tagname }}
                                    </el-check-tag>
                                </div>
                            </template>
                        </template>
                        
                    </el-scrollbar>
                </el-tab-pane>
                <el-tab-pane 
                    v-for="fitem in RightTagPopver.left" 
                    :label="fitem.text"
                    :name="fitem.cid">
                    <div v-loading="RightTagPopver.right.loading" style="height: 400px;">
                        <p style="padding-bottom: var(--el-popover-padding);display: flex;align-items: center;">{{fitem.text}}({{fitem.num}})<el-icon style="margin-left: 8px;cursor: pointer;" @click="RightTagPopverAddTag(item)"><Circle-Plus /></el-icon></p>
                        <el-scrollbar height="368px" v-if="!RightTagPopver.right.loading">
                            <el-check-tag
                                v-for="val in RightTagPopver.right.data"
                                :checked="RightTagPopver.right.active.indexOf(val.tid)>-1"
                                @change="RightTagPopverChange(item,val)"
                                :key="val.tid">
                                {{ val.tagname }}
                            </el-check-tag>
                        </el-scrollbar>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <template #reference>
            <div class="el-textarea">
                <div class="el-textarea__inner tag-box" style="min-height: 31px;line-height: 31px;">
                    <span v-if="!item.data.length" style="color:var(--el-text-color-placeholder);font-size: var(--el-font-size-base);vertical-align: text-bottom;">{lang label}</span>	
                    <el-tag
                        v-for="tag in item.data"
                        @close="RightFileTagDelete(item.flag,tag)"
                        :key="tag.tid"
                        disable-transitions
                        type="info"
                        closable>
                        {{tag.tagname}}
                    </el-tag>
                </div>
            </div>
            
        </template>
    </el-popover>
</el-form-item>